<!doctype html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Example ul element</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <div id="main">
    <div id="areas">
      <div id="columns">
        <div class="container-fluid machine-contents list">
          <draggable :list="jobs" :options="{group:'a', animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
            <transition-group :name="!drag? 'list-complete' : null" :css="true">
              <div v-for="(job, index) in jobs" :key="job.jobNumber" class="list-complete-item">
                <div>
                  {{ job.jobNumber }}
                </div>
                <div>
                  <br>
                  <button v-on:click="removeJob(jobs, index)">Remove</button>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>

        <div class="container-fluid machine-contents list">
          <draggable v-model="jobs2" :options="{group:'a', animation:150}" :no-transition-on-drag="true" @start="drag=true" @end="drag=false">
            <transition-group :name="!drag? 'list-complete' : null" :css="true">
              <div v-for="(job, index) in jobs2" :key="job.jobNumber" class="list-complete-item">
                <div>
                  {{ job.jobNumber }}
                </div>
                <div>
                  <br>
                  <button v-on:click="removeJob(jobs2, index)">Remove</button>
                </div>
              </div>
            </transition-group>
        </div>


      </div>
    </div>
    <button v-on:click="add">Add list 1</button>
    <button v-on:click="add2">Add list 2</button>
  </div>
  <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
  <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
  <script type="text/javascript" src="src\vuedraggable.js"></script>
  <script type="text/javascript" src="script\transition3.js"></script>
</body>

</html>